<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租车服务 - 车辆详情</title>
    <script src="/car_rental/u/js/jquery-3.7.1.min.js"></script>
    <%--  <link rel="stylesheet" href="../css/styles.css">--%>
      <link rel="stylesheet" href="/car_rental/u/css/carxx.css">
</head>

<body>
<main>
    <h2>${vehicles.type} - 车辆详情</h2>
    <section id="car-details">
        <div class="car-detail">
            <img src="/car_rental/u/images/${vehicles.imgePath}" alt="经济型">
            <div class="car-info">
                <h3 ><span id="carId">${vehicles.id}</span></h3>
                <h3>${vehicles.name}</h3>
                <p id>价格：¥<span id="price">${vehicles.price}</span>/天</p>
                <p>评价：${vehicles.description}</p>
            </div>
            <div id="rental-form">
                <label for="rental-days">租赁天数:</label>
                <input type="number" id="rental-days" name="rental-days" min="1" max="30" value = '1'>
                <label for="money">租金:</label>
                <input type="number" id="money" name="rental-days" min="1" max="30" disabled>
                <button id="add">提交租赁请求</button>
                <button id="goback">返回</button>
            </div>
        </div>
    </section>
    <section id="comments">
        <h2>评论区</h2>
        <div class="comment-list">
            <!-- 示例评论 -->
            <c:forEach items="${comments}" var="comment">
                <div class="comment">
                    <div class="comment-header">
                        <span class="comment-author" style="font-size: 20px">${comment.username}</span>
                        <span class="comment-date" style="font-size: 16px">${comment.commentTime}</span>
                    </div>
                    <div class="comment-body">
                        <p><c:out value="${comment.content}"/></p>
                    </div>
                </div>
            </c:forEach>

            <!-- 更多评论 -->
        </div>
        <form id="comment-form">
            <label for="comment-text">您的评论:</label>
            <textarea id="comment-text" name="comment-text" rows="2" required></textarea>
            <button type="submit">提交评论</button>
        </form>
    </section>
</main>
<%--<footer>
    <p>&copy; 2024 租车服务. 版权所有.</p>
</footer--%>>
</body>
<script>
    //获取用户id
    <%--var userId = <%= session.getAttribute("id") %>;--%>
    var userId = ${user.id};
    console.log('用户id'+userId);
    $(function () {
        $("#add").click(function () {
            if ( confirm("确定要租取吗？")){
                addOreder();
            }
        });
        $("#rental-days").blur(function () {
            var day = this.value;
            $("#money").val($("#price").text() * day);
        });
        // 添加订单
        function addOreder() {
            $.get('/car_rental/addRentalServlet', {
                'uId': userId,
                'vId': $("#carId").text(),
                'duration': $("#rental-days").val(),
                'totalCost': ($("#price").text() * $("#rental-days").val())
            },function (data) {
                console.log(data);
            })
        }
        //返回
        $("#goback").click(function () {
            window.history.back();
        })
    });
</script>
</html>
